<template>
  <Checkbox v-bind="$attrs" :checked="value" @change="onChange" />
</template>

<script setup lang="tsx">
import { Checkbox, Form, type CheckboxProps } from 'ant-design-vue';
import { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';

const props = defineProps<
  Omit<CheckboxProps, 'checked'> & { value: CheckboxProps['checked'] }
>();

const emit = defineEmits<{
  'update:value': [value: CheckboxProps['checked']];
}>();

const formItemContext = Form.useInjectFormItemContext();
const triggerChange = (e: CheckboxChangeEvent) => {
  emit('update:value', e.target.checked);
  props.onChange?.(e);
  formItemContext.onFieldChange();
};

const onChange = (e: CheckboxChangeEvent) => {
  triggerChange(e);
};
</script>
